import React, {Component} from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';
import MyDrivingRender from "./MyDrivingRender";
import './index.css';
class GDMap extends Component {

  constructor(props) {
    super(props);
    this.map = {};
    this.data = props.data || [];
  }

  componentDidMount() {
    const that = this;
    AMapLoader.load({
      key: '64df1a95fed42b4f6b3e73a500ed90a3',
      version: '2.0',
      plugins: ['AMap.Driving'],
    })
      .then(AMap => {
        that.map = new AMap.Map('gdContainer', {
          resizeEnable: true,
          viewMode: '3D',
          zoom: 2,
          center: [104.242978, 29.446187],
        });
        AMap.plugin('AMap.Driving', function () {

          // const arr = [new AMap.LngLat(104.242978, 29.446187),
          //   new AMap.LngLat(104.16586, 29.62534),
          //   new AMap.LngLat(104.716606, 29.396912),
          //   new AMap.LngLat(104.501495, 29.382648),
          //   new AMap.LngLat(104.40769, 29.338545)];

          const arr = [new AMap.LngLat(104.242978, 29.446187)];

          const storeInfo = [{
            key:arr[0],
            storeName:"四川科施福农业科技有限公司",
            address:"...",
            contacts:"...",
            tel:"4008746999"
          }];
          that.data.forEach(r=>{
            let point = new AMap.LngLat(r.longitude, r.latitude);
            arr.push(point);
            storeInfo.push({
              key:point,
              storeName:r.storeName,
              address:r.address,
              contacts:r.contacts,
              tel:r.tel,
            })
          });
          const points = {
            waypoints: arr.slice(1, arr.length - 1)
          };
          const policies = [AMap.DrivingPolicy.LEAST_TIME, AMap.DrivingPolicy.LEAST_FEE, AMap.DrivingPolicy.REAL_TRAFFIC, AMap.DrivingPolicy.LEAST_DISTANCE];
          let opts = {
            map: that.map,
            panel: 'panel',
            autoFitView: true,
            showTraffic: true,
            showDir: true,
            policy: policies[1]
          };
          const driving = new AMap.Driving(opts);
          const myDrivingRender = new MyDrivingRender(AMap, {
            showTraffic: opts["showTraffic"],
            showDir: opts["showDir"],
            zIndex: opts["zIndex"],
            eventSelf: this,
            storeInfo
          });
          driving.render = myDrivingRender;
          driving.search(arr[0], arr[arr.length - 1], points);
        })
      })
      .catch(e => {
        console.log(e);
      });
  }

  render() {
    return <>
      <div style={{display: 'flex'}}>
        <div id="gdContainer" className="map" style={{height: '600px'}}></div>
        <div id="panel"></div>
      </div>
    </>;
  }
}

export default GDMap;

